<template>
    <div>
        <h1>Message组件的基本使用1</h1>
        <el-button :plain="true" @click="open1">成功</el-button>
        <el-button :plain="true" @click="open2">警告</el-button>
        <el-button :plain="true" @click="open3">消息</el-button>
        <el-button :plain="true" @click="open4">错误</el-button>

        <h1>Message组件的基本使用 有关闭效果</h1>
        <el-button :plain="true" @click="open2">警告</el-button>
    </div>

</template>

<script>
export default {
    name: "MessageView",
    methods: {
        open1() {
            // this.$message.success("登录成功")
            // 切换路由  js
            // this.$router.push("/login")

            this.$message({
                message:'注册成功',
                type:"success",
                onClose: ()=>{   //  信息提示结束  执行该函数
                    console.log(this)
                    this.$router.push("/table")
                }
            })
        },
        open2() {
            this.$message({
                message:"这是一个警告信息",
                type:"warning",
                showClose:true   //  显示关闭提示信息
            })
        },
        open3() {
            this.$message("这是普通信息")
        },
        open4() {
            this.$message({
                message:'提示信息的文本居中效果',
                showClose:true,
                type:"error",
                center:true  //  提示信息的文本居中效果
            })
        }
    }
}
</script>

<style scoped>

</style>